<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<title>网络延迟测试网页版,手机网络延迟测试,在线网络延迟测试</title>
<meta name="keywords" content="网络延迟">
<meta name="description" content="这是一个在线网络延迟测试工具，基于HTTP协议，测试双向通信时的网络延迟时间。网络延迟测试网页版方便在手机等移动端测试移动网络的延迟时间。">
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.url, .timeout, .btn {
	display: inline-block;
	margin: 2px 27px 2px 0;
}
@media screen and (max-width:630px) {
.btn {
	display: block;
	width: 4em;
	margin: 5px auto;
}
}
#url, #timeout {
	width: 220px;
	color: blue;
	border: 1px #999 solid;
}
#url:focus, #timeout:focus {
	border: 1px #59f solid;
}
#timeout {
	width: 70px;
}
#btn {
	width: 4em;
}
#content{background:#000; color:#ddd;font: 16px/1.2em '微软雅黑'; min-height:2em; padding:10px 5px;}
</style>
</head>

<body>
<div class="wrap">
  <div class="top"><div class="c1"></div><div class="c2"></div></div>
  <div class="main">
    <div class="title"><h1>网络延迟测试网页版</h1></div>    
    <div class="url">网址：<input type="text" id="url" placeholder="域名或IP" onKeyPress="return getkey(event);"></div>
    <div class="timeout">超时：<input id="timeout" type="number" step="100" max="5000" min="50" value="2000" onKeyPress="return getkey(event);">毫秒</div>
    <div class="btn"><input id="btn" type="button" value="开始" onclick="btnClick()"></div>
    <hr>
    <div id="content">网络延迟时间检测……</div>
    <p>本工具基于HTTP协议测试本机访问目标网址的网络延迟时间。所谓网络延迟时间，即从本机发送数据到目标主机然后回传给本机需要的时间。<br>
    网址：输入域名或者IP都可以；<br>
    超时：向目标网址发出访问请求后，超过这个时间未收到回应则判为超时。输入值在50毫秒至5000毫秒之间。</p>
    <p>移动网络十分便捷，但相对于有线网络存在网络延迟高的问题，这样会对一些需要即时双向数据传输的网络应用产生影响甚至无法正常使用。例如游戏玩家在使用移动网络玩游戏时，常常因为网络延迟高而卡顿，甚至无法进入游戏，这个时候即使网络带宽达到百兆千兆也无济于事；再如我们经常在电视画面中看到卫星直播会出现一方说完另一方要等一会儿才会回复，甚至互相抢话，同样是因为网络延迟，虽然是卫星传输，也是一种移动网络。在传输过程中转发节点越多，网络延迟越高。</p>
    <p>在PC上，通常用ping命令来测试网络延迟，ping命令通过ICMP协议来检测网络主机状态，十分方便。然而在手机上不能使用ping命令，所以制作了这个通过HTTP协议测试网络延迟的页面，方便在手机上测试网络延迟。</p>
  </div>   
</div>
<script>
function $(id){return document.getElementById(id);}
var arrDelays = [];
var intSent;
var receive;
var bolIsRunning = false;
var sioe = true;
var strURL;
var intTimeout;
var intStartTime;

function ping(){
    if(!bolIsRunning) return;
    intStartTime = +new Date();
    intSent++;
	var xmlhttp = new XMLHttpRequest();
	var timedout = false;
	var timer = setTimeout(function(){
			timedout = true;
			timeout();
			xmlhttp.close();
	},intTimeout);
	xmlhttp.onreadystatechange = function(){
		if(!timedout){
			if (xmlhttp.readyState == 4){
				clearTimeout(timer);
				receive++;
				var delay = new Date() - intStartTime;
				println("延迟时间" + ((delay<1)?("<1"):("="+delay)) + "ms");
				arrDelays.push(delay);
				setTimeout(ping, delay<1000?(1000-delay):1000);
			}
		}
	}
	xmlhttp.open("POST",strURL,true);
	xmlhttp.send(null);
}
function timeout(){
	receive++;
    println("超时！");
	setTimeout(ping, intTimeout<1000?(1000-intTimeout):1000);
}
function result(){
	var intRecv = arrDelays.length;
	var intLost = intSent-intRecv;
	var sum = 0;
	for(var i=0; i<intRecv; i++) sum += arrDelays[i];
	$("btn").value = "开始";
	sioe = true;
	$("btn").disabled = '';
	println("<br>" + strURL + " 统计结果：");
	println("测试次数：")
	println("发送 " + intSent + " 次，收到 " + intRecv + " 次，超时 " + intLost + " 次（" + Math.floor(intLost / intSent * 100) + "%）。");
	if(intRecv == 0) return;
	println("延迟时间：");
	println("最小 " + Math.min.apply(this, arrDelays) + " ms，最大 " + Math.max.apply(this, arrDelays) + " ms，平均 " + Math.floor(sum/intRecv) + " ms。");
}
function btnClick(){
    if(bolIsRunning){
        bolIsRunning = false;
		sioe = false;
		$("btn").disabled = 'disabled';
		function odd(){
			if(intSent>receive)
			setTimeout(odd, 50);
			else
			result();
		}
		odd();
    }else{
        strURL = $("url").value;
		var re = new RegExp("^https://", "i"); 
        if(strURL.length == 0 || !re.test(strURL)) return alert('请输入“https://”开头的网址，域名或IP均可。');
        intTimeout = parseInt($("timeout").value, 10);
        if(isNaN(intTimeout)) intTimeout = 2000; else if(intTimeout < 50) intTimeout = 50;
        $("btn").value = "停止";
        bolIsRunning = true;
        arrDelays = [];
        intSent = 0;
		receive = 0;
		$("content").innerHTML = strURL + " 网络延迟测试：<br><br>";
        ping();
    }
}
function println(str){
    var objDIV = document.createElement("div");
    objDIV.innerHTML = str;
    $("content").appendChild(objDIV);
    $("content").scrollTop = $("content").scrollHeight;
}
function getkey(e)
{
	var keynum
	if(window.event) // IE
	{
	   keynum = e.keyCode;
	}
	else if(e.which) // Netscape/Firefox/Opera
	{
	  keynum = e.which;
	}
    if (keynum == 13 && sioe)
        {
			btnClick();
		}
}
</script>
</body>
</html>